<!-- 道岔配置面板 -->
<template>
    <div class="turnouts-config-list">
        <div class="turnouts-config-list-header">
            <el-button @click="newTurnout()">新建道岔</el-button>
        </div>
        <div class="turnouts-config-list-body">
            <div class="turnout-config-item" v-for="turnout, i in turnouts">
                <!-- 选择道岔的类型 -->
                <TurnoutConfig :turnout="turnout" @delete-turnout="deleteTurnout(i)"
                    @update:turnout="updateTurnout(i, $event)"></TurnoutConfig>
            </div>
        </div>
    </div>

</template>
<script setup lang="ts">
import { defineProps, PropType, defineEmits } from "vue"
import { Turnout } from "../../models"
import TurnoutConfig from "./TurnoutConfig.vue"
import { deepCopy } from "element-sci-ui";
const emits = defineEmits(['update:turnouts'])
const props = defineProps({
    turnouts: {
        type: Array as PropType<Turnout[]>,
        required: true
    }
})
const newTurnout = () => {
    const turnoutsCopied = deepCopy<Turnout[]>(props.turnouts)
    turnoutsCopied.push({
        "name": "未命名道岔",
        type: "left_hand_turnout",
        "magnets": [{ reversed: false, "index": 0, "ground_controller_name": "aaa" }],
        // "state": "left"
    })
    emits("update:turnouts", turnoutsCopied)
}
// 'left_hand_turnout' , "right_hand_turnout" , 'bilateral_turnout' , 'three_row_turnout'
const turnoutTypes = [{
    label: "左开道岔", value: "left_hand_turnout"
}, {
    label: "右开道岔", value: "right_hand_turnout"
}, {
    label: "对称道岔", value: "bilateral_turnout"
}, {
    label: "三开道岔", value: "three_row_turnout"
}
]

const deleteTurnout = (i: number) => {
    const turnoutsCopied = deepCopy<Turnout[]>(props.turnouts)
    turnoutsCopied.splice(i, 1)
    emits("update:turnouts", turnoutsCopied)
}

const updateTurnout = (i: number, evt: Turnout) => {
    const turnoutsCopied = deepCopy<Turnout[]>(props.turnouts)
    turnoutsCopied[i] = evt
    emits("update:turnouts", turnoutsCopied)
}
</script>
<style lang="css">
.turnouts-config-list {
    display: flex;
    flex-direction: column;
}

.turnouts-config-list-header {
    display: flex;
    flex-direction: row;
}

.turnouts-config-list-body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 20px;
}
</style>